<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Expires" content="0"/>
	<meta http-equiv="Cache-Control" content="no-cache, no-store"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<title>谷歌地图</title>
	<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
		String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
	%>
	<%--项目路径 --%>
	<c:set var="basePath" value="<%=projectPath%>"></c:set>
	<c:set var="ctx" value="${pageContext.request.contextPath}"/>
	<link rel="stylesheet" href="${ctx}/map/css/gh-buttons.css">
	<script type="text/javascript" src="${ctx}/map/js/public/util.js"></script>
	<style>
		body, html, #allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0 auto;
		}

		.datatable {
			font-size: 12px;
			display: none;
		}

		.button {

		}

		.maptable td {
			border: 0px;
			padding: 2px;
			color: #0099FF;
			font-size: 13px;
		}

		.tdheader {
			text-align: right;
			color: #000000 !important;
		}

		.labels {
			color: blue;
			fontSize: 12px;
			height: 20px;
			border: 0;
			background: #CCFFCC;
			lineHeight: 20px;
			fontFamily: "微软雅黑"
		}

		.labels1 {
			color: blue;
			fontSize: 12px;
			height: 20px;
			border: 0;
			lineHeight: 20px;
			fontFamily: "微软雅黑";
			padding-left: 50px;
		}

		.fontClass {
			color: blue
		}

		.gmnoprint {
			display: none;
		}
	</style>
	<%--<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc"></script>--%>
	<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyBpiFatjM3XBf7ddPC5lTyKC4Xye3xqHaU&language=zh-CN&libraries=drawing"></script>
	<!-- 中国版 -->
	<%--<script src="http://ditu.google.cn/maps?file=api&hl=zh-CN&v=2&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc"></script>--%>
</head>
<body>
<div style="position: absolute; right: 1px; top: 1px; z-index: 1">
	<ul class="button-group">
		<li><a href="#" class="button" id="panelTool" title="拖动地图">
			<img src="${ctx}/map/images/toolbar/hand.gif"/></a></li>
		<li><a href="#" class="button" id="rectZoomoutTool" title="矩形缩小">
			<img src="${ctx}/map/images/toolbar/zoomout.gif"/></a></li>
		<li><a href="#" class="button" id="rectZoominTool" title="矩形放大">
			<img src="${ctx}/map/images/toolbar/zoomin.gif"/></a></li>
		<li><a href="#" class="button" id="measureTool" title="测距">
			<img src="${ctx}/map/images/toolbar/measure.png"/></a></li>
		<li><a href="#" class="button" id="measureToolClean" title="清除测距">
			<img src="${ctx}/map/images/toolbar/clean.gif"/></a></li>
		<%--		<li><a href="#" class="button" id="rectQueryTool" title="矩形查设备">
			<img src="<%=mapPath%>/images/toolbar/rectQuery.png"/></a></li> --%>
		<li><a href="#" class="button" id="markerTool" title="标注">
			<img src="${ctx}/map/images/toolbar/marker.png"/></a></li>
		<li><a href="#" class="button" id="rectTool" title="矩形区域">
			<img src="${ctx}/map/images/toolbar/rect.png"/></a></li>
		<li><a href="#" class="button" id="circleTool" title="圆形区域">
			<img src="${ctx}/map/images/toolbar/circle.png"/></a></li>
		<li><a href="#" class="button" id="polygonTool" title="多边形区域">
			<img src="${ctx}/map/images/toolbar/polygon.png"/></a></li>
		<%--	<li><a href="#" class="button" id="polylineTool" title="线路">
			<img src="${ctx}/map/images/toolbar/polyline.png"/></a></li>
		<li><a href="#" class="button" id="keyPointTool" title="关键点">
				<img src="<%=mapPath%>/images/toolbar/keypoint.png"/></a></li> --%>
		<li><a href="#" class="button" id="saveTool" title="保存中心兴趣点">
			<img src="${ctx}/map/images/toolbar/point.png"/></a></li>
		<%--	<li><a href="#" class="button" id="showAllTool" title="显示所有设备">
			<img src="<%=mapPath%>/images/toolbar/showAll.png"/></a></li>   --%>
	</ul>
</div>
<div id="allmap">
</div>
<script type="text/javascript" src="${ctx}/js/jquery/jquery1.8.min.js"></script>
<script type="text/javascript" src="${ctx}/map/GoogleMapHandler.js?v=10"></script>
<script type="text/javascript" src="${ctx}/map/google/js/markerclusterer.js"></script>
<script type="text/javascript" src="${ctx}/map/google/js/markerwithlabel.js"></script>
<script type="text/javascript" src="${ctx}/map/google/js/infobubble.js"></script>
<script type="text/javascript" src="${ctx}/map/google/js/distance.js"></script>
<link type="text/css" href="${ctx}/topjui/css/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="${ctx}/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
<!-- FontAwesome字体图标 -->
<link type="text/css" href="${ctx}/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心 -->
<script type="text/javascript" src="${ctx}/topjui/js/topjui.core.min.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="${ctx}/topjui/js/locale/topjui.lang.zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/static/plugins/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript">
	var path = "${ctx}";
	var map = null;
	var OperatorObj = null;
	var mapTool = "queryRect"; //矩形工具，用来区分是矩形查询车辆，还是矩形区域画图 query和draw
	$(function () {

		//当前登录用户信息
		var userInfo = window.parent.userInfo;//用户设置的地图中心
		var mapType = google.maps.MapTypeId.ROADMAP;
		var lat = userInfo.latitude, lng = userInfo.longitude, zoom = 10;
		var mapOptions = {
			center: new google.maps.LatLng(lat, lng),  //地图的中心点
			zoom: zoom,               　　　　　　　　　　//地图缩放比例
			disableDoubleClickZoom: true,
			keyboardShortcuts: false,
			mapTypeId: mapType,       　　　　　　　　　　//指定地图展示类型：卫星图像、普通道路
			scrollwheel: true          　　　　　　　　　 //是否允许滚轮滑动进行缩放
		};
		map = new google.maps.Map(document.getElementById("allmap"), mapOptions); //创建谷歌地图
		OperatorObj = new GoogleMapHandler(map, path + '/map');
		google.maps.event.addListener(map, 'tilesloaded', function () {
			setTimeout(function () {
				$(".gm-china a").remove();
			}, 100);
		});


		$("#measureTool").click(function () {
			//myDis.open();
			map.setOptions({draggableCursor: "crosshair", draggingCursor: "crosshair"});
			GoogleUtil.control.addRulerControl();
		});
		$("#measureToolClean").click(function () {
			map.setOptions({draggableCursor: null, draggingCursor: null});
			GoogleUtil.control.addClearRulerOverlayControl();
		});
		$("#rectZoomoutTool").click(function () {
			map.setZoom(map.getZoom() - 1);
			if (map.getZoom() < 15) {
				map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
			}
		});
		$("#rectZoominTool").click(function () {
			map.setZoom(map.getZoom() + 1);
			if (map.getZoom() >= 15) {
				map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
			}
		});
		function reset() {
			drawingManager.close();
			myDis.close();
			myZoomoutDrag.close();
			myZoomInDrag.close();
		}

		var styleOptions = {
			strokeColor: "red",    //边线颜色。
			fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}
//实例化鼠标绘制工具
		var drawingManager = new google.maps.drawing.DrawingManager({
			map: map,
			drawingControl: false, //是否显示工具栏
			drawingControlOptions: {
				//anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
				//offset: new BMap.Size(5, 5), //偏离值
				scale: 0.8,//工具栏缩放比例
				drawingModes: [
					google.maps.drawing.OverlayType.MARKER,
					google.maps.drawing.OverlayType.CIRCLE,
					google.maps.drawing.OverlayType.POLYLINE,
					google.maps.drawing.OverlayType.POLYGON,
					google.maps.drawing.OverlayType.RECTANGLE
				]
			},
			circleOptions: styleOptions, //圆的样式
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions, //多边形的样式
			rectangleOptions: styleOptions //矩形的样式
		});
		//回调获得覆盖物信息e.overlay, e.drawingMode
		var overlaycomplete = function (e) {
//overlays.push(e.overlay);
			var strPoints = "";
			if (e.overlay.getPath) {
				var pointArray = e.overlay.getPath();
				var sep = "";
				for (var m = 0; m < pointArray.length; m++) {
					var pt = pointArray.getAt(m);
					if (pt != null) {
						strPoints += sep + pt.lng() + "," + pt.lat();
						sep = ";";
					}
				}
			}
			var mapType = "google";//围栏的地图类型
			if (e.type == google.maps.drawing.OverlayType.MARKER) {
				//this.addMarker(e.overlay.getPosition().lng, e.overlay.getPosition().lat);
				//map.removeOverlay(e.overlay);
				strPoints = e.overlay.getPosition().lng() + "," + e.overlay.getPosition().lat();
				if (mapTool == "keyPointTool") {
					//标注关键点
					var url = path + "/area/viewKeyPoint?id=0&enclosureType=circle&strRoutePoints=" + strPoints + "&radius=" + 100 + "&mapType=" + mapType;
					parent.openRouteWindow(url, 760, 370, "关键点编辑", function () {
						//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
						e.overlay.setMap(null);
					});
					drawingManager.setDrawingMode(null);
				}
				else if (mapTool == "markerTool") {
					//标注
					var url = path + "/area/viewMarker?id=0&enclosureType=marker&strRoutePoints=" + strPoints + "&radius=" + 100 + "&mapType=" + mapType;
					parent.openRouteWindow(url, 350, 210, "标注点编辑", function () {
						//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
						e.overlay.setMap(null);
					});
					drawingManager.setDrawingMode(null);
				}
			}
			else if (e.type == google.maps.drawing.OverlayType.CIRCLE) {
				//画圆形
				var radius = e.overlay.getRadius();
				strPoints = e.overlay.getCenter().lng() + "," + e.overlay.getCenter().lat();
				var url = path + "/area/viewArea?id=0&enclosureType=circle&strRoutePoints=" + strPoints + "&radius=" + radius + "&mapType=" + mapType;
				parent.openRouteWindow(url, 600, 250, "圆形区域编辑", function () {
					//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					e.overlay.setMap(null);
				});
				drawingManager.setDrawingMode(null);
			}
			else if (e.type == google.maps.drawing.OverlayType.POLYGON) {
				//多边形
				var url = path + "/area/viewArea?id=0&enclosureType=polygon&strRoutePoints=" + strPoints + "&mapType=" + mapType;
				if (strPoints.length > 225) {
					alert('所画多边形围栏过复杂');
					//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					e.overlay.setMap(null);
					return;
				}
				parent.openRouteWindow(url, 600, 250, "多边形区域编辑", function () {
					//关闭窗口时的回调函数
					//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
					e.overlay.setMap(null);
				});
				drawingManager.setDrawingMode(null);
			}
			else if (e.type == google.maps.drawing.OverlayType.RECTANGLE) {
				if (mapTool == "rectQueryTool") {
					//矩形查询车辆
					var url = path + "/Vehicle.mvc/viewVehicleInArea?enclosureType=rect&strRoutePoints=" + strPoints;
					parent.openRouteWindow(url, 720, 420, "区域查车", function () {
						//关闭窗口时的回调函数
						//	map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
						e.overlay.setMap(null);
					});
				}
				else {
					var bounds = e.overlay.getBounds();
					var strPoints1 = bounds.getSouthWest().lng() + "," + bounds.getSouthWest().lat() + ";" + bounds.getNorthEast().lng() + "," + bounds.getSouthWest().lat() + ";" +
							bounds.getNorthEast().lng() + "," + bounds.getNorthEast().lat() + ";" + bounds.getSouthWest().lng() + "," + bounds.getNorthEast().lat();
					//画出矩形区域
					var url = path + "/area/viewArea?id=0&enclosureType=rect&strRoutePoints=" + strPoints1 + "&mapType=" + mapType;
					parent.openRouteWindow(url, 600, 250, "矩形区域编辑", function () {
						//关闭窗口时的回调函数
						//map.removeOverlay(e.overlay); //关闭窗口时，擦掉画图的图元
						e.overlay.setMap(null);
					});
					drawingManager.setDrawingMode(null);
				}
			}
		};
		//添加鼠标绘制工具监听事件，用于获取绘制结果
		google.maps.event.addListener(drawingManager, "overlaycomplete", overlaycomplete);
		$("#rectTool").click(function () {
			mapTool = this.id; //画矩形
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE) //画矩形
		});
		$("#rectQueryTool").click(function () {
			//reset();
			mapTool = this.id; ///矩形查询车辆
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE) //画矩形
		});
		$("#polylineTool").click(function () {
			//reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE) //画线路
			//drawingManager.open();
		});
		$("#polygonTool").click(function () {
			//reset();
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON) //画多边形
			//drawingManager.open();
		});
		$("#circleTool").click(function () {
			//reset();
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.CIRCLE) //画圆形
			//drawingManager.open();
		});
//地图标注
		$("#markerTool").click(function () {
			//reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER) //标注
			//drawingManager.open();
		});
//地图标注
		$("#keyPointTool").click(function () {
			//reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER) //标注
			//drawingManager.open();
		});
//拖动地图
		$("#panelTool").click(function () {
			//reset();
			mapTool = this.id;
			drawingManager.setDrawingMode(null);
			map.setOptions({draggableCursor: null, draggingCursor: null});
			GoogleUtil.control.addClearRulerOverlayControl();
			//drawingManager.close(); //关闭画的模式
		});
//保存地图兴趣点
		$("#saveTool").click(function () {
			mapTool = this.id;
			drawingManager.setDrawingMode(null);
			var centerPoint = map.getCenter();
			var zoom = map.getZoom();
			var postData = {lat: centerPoint.lat, lng: centerPoint.lng};
			var url = path + "/user/setMapCenter";
			$.getJSON(url, postData, function (result) {
				//$.messager.alert("提示",result.message);
				//alert(result.message);
				$.iMessager.alert('提示', result.msg, 'messager-info');
			});
		});
		loadEnclosures();//加载电子围栏到地图上面


		$('#allmap').mousewheel(function (event, delta) {
			var dir = delta > 0 ? 'Up' : 'Down';
			if (dir == 'Up') {
				if (map.getZoom() >= 15) {
					map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
				}

			} else {
				if (map.getZoom() < 15) {
					map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
				}
			}
			return false;

		});

	});
	/**
	 * 根据数据库记录,创建标注,绑定点击事件，点击时，打开窗口，显示信息
	 */
	function createExtendMarker(lat, lng, radius, id, markerName) {
		OperatorObj.removeMapArea(id);
		var pt = new google.maps.LatLng(lat, lng);
		var icon = path + "/map/images/track/keyPoint48.png";
		var marker = new google.maps.Marker({
			position: pt,
			icon: icon
		});
		//var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注

		google.maps.event.addListener(marker, 'click', function () {
			//关键点点击事件
			var url = path + "/area/viewMarker?id=" + id;
			parent.openRouteWindow(url, 350, 210, "地标设置");
		});
		marker.setMap(map);              // 将标注添加到地图中
		var label = OperatorObj.createLabel(id, lat, lng, markerName);
		OperatorObj.cacheAreaOverlay(id, marker, label);
		return marker;
	}

	/**
	 * 创建围栏，并绑定点击事件
	 * @id 是数据库的围栏id
	 * @enclosureType, 类型：circle, rect,polygon三种
	 */
	function createExtendEnclosure(strPoints, radius, id, enclosureType, name, centerLat, centerLng) {
		OperatorObj.removeMapArea(id);
		if (!strPoints)
			return;
		//var style = {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5};
		var overlay = null;
		if (enclosureType == "circle") {
			var points = stringToPoint(strPoints);
			var center = points[0];
			var populationOptions = {
				strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#FF0000",
				fillOpacity: 0.35,
				map: map,
				center: center,
				radius: radius
			};
			overlay = new google.maps.Circle(populationOptions);
		} else if (enclosureType == "rect") {
			var points = new Array();
			var splits = strPoints.split(";");
			for (var i = 0; i < splits.length; i++) {
				var lngLat = splits[i].split(",");
				if (lngLat != "") {
					points.push(lngLat);
				}
			}
			overlay = new google.maps.Rectangle({
				strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#FF0000",
				fillOpacity: 0.35,
				map: map,
				bounds: {
					north: parseFloat(points[2][1]),
					south: parseFloat(points[1][1]),
					west: parseFloat(points[0][0]),
					east: parseFloat(points[2][0])

				}
			});
			//overlay.setMap(map);
		} else if (enclosureType == "polygon") {
			var points = new Array();
			var splits = strPoints.split(";");
			for (var i = 0; i < splits.length; i++) {
				var lngLat = splits[i].split(",");
				if (lngLat != "") {
					var lng = parseFloat(lngLat[0]);
					var lat = parseFloat(lngLat[1]);
					points.push(new google.maps.LatLng(lat, lng));
				}
			}
			overlay = new google.maps.Polygon({
				paths: points,
				strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#FF0000",
				fillOpacity: 0.35,
				map: map,
			});
		}
		if (overlay != null) {
//绑定点击事件
			google.maps.event.addListener(overlay, 'click', function () {
				var url = path + "/area/viewArea?id=" + id;
				parent.openRouteWindow(url, 600, 250, "区域设置");
			});

			var label = OperatorObj.createLabel(id, centerLat, centerLng, name);
			OperatorObj.cacheAreaOverlay(id, overlay, label);
		}
	}


	/**
	 * 将坐标字符串(格式:lng1,lat1;lng2;lat2....)，转换成百度坐标数组
	 */
	function stringToPoint(strPoints) {
		var points = new Array();
		var splits = strPoints.split(";");
		for (var i = 0; i < splits.length; i++) {
			var lngLat = splits[i].split(",");
			if (lngLat != "") {
				var lng = parseFloat(lngLat[0]);
				var lat = parseFloat(lngLat[1]);
				var bp = new google.maps.LatLng(lat, lng);
				points.push(bp);
			}
		}
		return points;
	}


	function convertRecord(rd) {
		var dataInfo = {
			id: rd.id,
			text: rd.simNo,
			vehicleId: rd.id,
			rLat: rd.latitude,
			rLng: rd.longitude,
			tLat: rd.latitude,
			tLng: rd.longitude,
			status: rd.status,
			validate: rd.valid,
			direction: rd.direction,
			sendTime: rd.sendTime,
			angleInt: rd.direction,
			statusInt: 0,
			velocity: rd.velocity,
			warnTypeId: 0,
			online: rd.online
		};
		rd.orgLatitude = parseFloat(rd.orgLatitude).toFixed(6);
		rd.orgLongitude = parseFloat(rd.orgLongitude).toFixed(6);
		rd.gas = parseFloat(rd.gas).toFixed(1);
		rd.mileage = parseFloat(rd.mileage).toFixed(1);
		rd.velocity = parseFloat(rd.velocity).toFixed(1);
		dataInfo = $.extend(rd, dataInfo);
		return dataInfo;
	}


	//加载用户的围栏
	function loadEnclosures() {
		var params = {};
		$.getJSON(path + "/area/enclosureList", params,
				function (result) {
					if (result.success) {
						//逐一创建围栏
						$.each(result.data, function (i, item) {
									var overlay = null;
									var label = null;
									/*	if (item.EnclosureType == "route") {
									 createExtendPolyline(item.Points, item.EntityId, item.Name, item.CenterLat, item.CenterLng);
									 } else    */
									if (item.enclosureType == "marker") {
										createExtendMarker(item.centerLat, item.centerLng, item.radius, item.id, item.name);
									}
									/* else if (item.KeyPoint == 1) {
									 createExtendKeyPoint(item.CenterLat, item.CenterLng, item.Radius, item.EntityId, item.Name);
									 }*/
									else {
										createExtendEnclosure(item.points, item.radius, item.id, item.enclosureType, item.name, item.centerLat, item.centerLng);
										//}
										/*if (item.CenterLat > 0 && item.CenterLng > 0) {
										 //创建标签
										 //OperatorObj.createLabel(item.EntityId, item.centerLat, item.centerLng, item.name);
										 }*/
									}
								}
						);

					}
				}
		);


	}

</script>
</body>
</html>
